class Popover {
    constructor() {
        this.eles = document.querySelectorAll('.gd-popover')
    }
    setElement(ele) {
        if(typeof ele === 'object') {
            if(ele instanceof Array) {
                this.eles = ele
            } else {
                this.eles = [].concat(ele)
            }
        } else {
            console.error('popover setElement need Element')
        }
    }
    init() {
        this.eles.forEach(item => {
            const content = item.getAttribute('content')
            if(content) {
                if(gugeeGobal.isMobile) {
                    const config = {
                        title: item.getAttribute('data-title'),
                        isShowCancelBtn: false,
                        confirmBtnText: 'I Know',
                        position: {
                            top: '10vh'
                        },
                        beforeShowEvent: modal => {
                            modal.style.maxHeight = 'calc(80vh - 75px)'
                            modal.querySelector('.modal-body').style.maxHeight = 'calc(80vh - 211px)'
                        }
                    }
                    item.addEventListener('click', e => {
                        config.content = item.getAttribute('content')
                        showModal(config)
                    })
                } else {
                    const dom = document.createElement('div')
                    let domClass = 'gd-popover__inner'
                    const placement = item.getAttribute('placement')
                    if(placement) {
                        if(placement === 'right') {
                            domClass += ' gd-popover-' + placement
                        }
                    } else {
                        domClass += ' gd-popover-top'
                    }
                    dom.className = domClass
                    dom.innerHTML = content
                    item.appendChild(dom)
                    item.removeAttribute('content')
                    item.removeAttribute('placement')
                    item.addEventListener('mouseover', () => {
                        dom.show()
                    })
                    item.addEventListener('mouseout', () => {
                        dom.hide()
                    })
                }
            }
        })
    }
}
export default Popover